<template>
<div class="cinema_body">
    <ul v-if='list.length'>
        <li v-for='item in list' :key='item.id'>
            <div>
                <span>{{item.name}}</span>
                <span class="q"><span class="price">{{item.minPrice/100}}</span> 元起</span>
            </div>
            <div class="address">
                <span>{{item.addr}}</span>
                <span>{{item.distance}}km</span>
            </div>
            <div class="card">
                <div 
                    v-for='(val,key) in item.discounts'
                    :key='key'
                    v-show='val'
                    :class='key|color'
                >
                    {{key|text}}
                </div>
            </div>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    name:'CiList',
    data(){
        return {
            list:[]
        }
    },
    async created(){
        let data = await this.$axios.get('/api/cinema');
        console.log(data)
        this.list = data.data.list;
    },
    filters:{
        text(key){
            let textObj = {
                'allowRefund':'认证',
                'buyout':'上市',
                'cityCardTag':'城市名片',
                'deal':'政策',
                'endorse':'促销',
                'hallTypeVOList':'人气',
                'sell':'销量',
                'snack':'小吃',
                'vipTag':'折扣卡'
            }
            return textObj[key]
        },
        color(key){
            let colorObj = {
                'allowRefund':'or',
                'buyout':'or',
                'cityCardTag':'or',
                'deal':'or',
                'endorse':'bl',
                'hallTypeVOList':'bl',
                'sell':'bl',
                'snack':'bl',
                'vipTag':'bl'
            }
            return colorObj[key]
        }
    }

}
</script>

<style scoped>
#content .cinema_body{ flex:1; overflow:auto;}
.cinema_body ul{ padding:20px;}
.cinema_body li{  border-bottom:1px solid #e6e6e6; margin-bottom: 20px;}
.cinema_body div{ margin-bottom: 10px;}
.cinema_body .q{ font-size: 11px; color:#f03d37;}
.cinema_body .price{ font-size: 18px;}
.cinema_body .address{ font-size: 13px; color:#666;}
.cinema_body .address span:nth-of-type(2){ float:right; }
.cinema_body .card{ display: flex;}
.cinema_body .card div{ padding: 0 3px; height: 15px; line-height: 15px; border-radius: 2px; color: #f90; border: 1px solid #f90; font-size: 13px; margin-right: 5px;}
.cinema_body .card div.or{ color: #f90; border: 1px solid #f90;}
.cinema_body .card div.bl{ color: #589daf; border: 1px solid #589daf;}
</style>